<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图片管理</el-breadcrumb-item>
      <el-breadcrumb-item>图片列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <!-- 头像部分 -->
        <el-tab-pane label="头像管理" name="headImage">
          <el-upload
          class="avatar-uploader"
          :action="'http://localhost:3000/' + activeName"
          :show-file-list="false"
          :data="datas"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl_a" :src="imageUrl_a" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon background_i"></i>
          </el-upload>
        </el-tab-pane>

        <!-- 背景部分 -->
        <el-tab-pane label="背景管理" name="background">
          <el-upload
          class="avatar-uploader"
          :action="'http://localhost:3000/' + activeName"
          :show-file-list="false"
          :data="datas"
          :on-success="handleAvatarSuccess_a"
          :before-upload="beforeAvatarUpload_a">
            <img v-if="imageUrl_b" :src="imageUrl_b" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon background_i"></i>
          </el-upload>
        </el-tab-pane>

        <!-- 轮播图部分 -->
        <el-tab-pane label="轮播图管理" name="Rotation">
          <el-upload
            :action="'http://localhost:3000/' + activeName"
            list-type="picture-card"
            :file-list="FileList"
            :data="datas"
            ref="upload"
            :before-upload="beforeAvatarUpload_b"
            :on-success="handleAvatarSuccess_b">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handlePicture(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-tab-pane>

        <!-- 生活照部分 -->
        <el-tab-pane label="生活照管理" name="lifePhotos">
          <el-upload
            class="upload-demo"
            :on-remove="handlePicture"
            action=""
            :data="datas"
            :before-remove="beforeRemove"
            :on-change="onChange"
            :file-list="fileList"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- 文本输入框区域 -->
            <div slot="tip" class="el-upload__tip">
              <el-row>
                <el-col :span="12">
                  <el-form :model="datas" :rules="ruleFormRules" ref="ruleFormRef" label-width="80px">
                    <el-form-item label="图片描述" prop="img_Introduction">
                      <el-input v-model="datas.img_Introduction" placeholder="请输入图片描述"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-button class="rowCol_button" @click="editing" type="primary">描述编辑</el-button>
              </el-row>
            </div>
          </el-upload>
          <div class="lifePhotos_div">
            <el-button type="primary" @click="AddLifePhotos" icon="el-icon-s-promotion">提  交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 编辑所有描述对话框 -->
    <el-dialog
      title="描述编辑"
      :visible.sync="DescriptionVisible"
      width="50%"
      @close="closedCallback">
      <el-form :model="DescriptionForm" :rules="DescriptionFormRules" ref="DescriptionFormRef" label-width="60px">
        <el-form-item label="描述" prop="img_Introduction">
          <el-input v-model="DescriptionForm.img_Introduction"></el-input>
        </el-form-item>
      </el-form>
      <el-select @change="handleChange" :disabled="Forbidden" v-model="MedianValue" placeholder="请选择">
        <el-option v-for="item in nameForm" :key="item.img_id" :label="item.img_name" :value="item.img_id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DescriptionVisible = false">取 消</el-button>
        <el-button type="primary" @click="ConfirmModify">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    // 获取图片
    this.GetAPicture()
  },
  data () {
    return {
      // 要被渲染的头像图片地址
      imageUrl_a: '',
      // 要被渲染的背景图片地址
      imageUrl_b: '',
      // 要被渲染的轮播地址
      dialogImageUrl: '',
      // 要向后台发送的数据
      datas: {
        names: '',
        types: '',
        img_Introduction: ''
      },
      // 要被选中的标签页
      activeName: 'headImage',
      // 控制是否放大
      dialogVisible: false,
      // 控制按钮显示
      disabled: false,
      // 要回显的轮播地址
      FileList: [],
      // 要回显的生活照
      fileList: [],
      // 表单验证规则
      ruleFormRules: {
        img_Introduction: [
          { required: true, message: '请输入对该图片的描述', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 控制编辑描述对话框的显示和隐藏
      DescriptionVisible: false,
      // 选择要修改的描述值
      DescriptionForm: {},
      // 要被渲染的选择框
      nameForm: [],
      // 选中的值
      MedianValue: '',
      // 表单验证
      DescriptionFormRules: {
        img_Introduction: [
          { required: true, message: '请输入对该图片的描述', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 是否禁用编辑选项
      Forbidden: false
    }
  },
  methods: {

    // 图片上传成功时调用
    handleAvatarSuccess (res, file) {
      // 判读是否添加头像成功
      if (file.response.status !== 200) return this.$message.error('添加头像失败!')
      // 渲染头像
      this.imageUrl_a = URL.createObjectURL(file.raw)
      this.$message.success('添加头像成功!')
    },

    // 上传头像之前调用
    beforeAvatarUpload (file) {
      // 判读是否时符合要求的图片
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        return this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        return this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      this.datas.names = file.name
      this.datas.types = this.activeName
    },

    // 获取图片
    async GetAPicture () {
      // 请求图片
      const { data: ser } = await this.$http.get('allImgList')
      // 判读是否请求成功
      if (ser.status !== 200) return this.$message.error('获取图片失败!')
      // 获取图片成功渲染图片
      // 渲染头像
      this.imageUrl_a = require(`../../assets/Head_image/${ser.result.HeadImage[0].img_name}`)
      this.imageUrl_b = require(`../../assets/Background_image/${ser.result.Background[0].img_name}`)
      // this.FileList.push({ name: '', url: require('../../assets/Head_image/1.jpg') })
      ser.result.Rotation.forEach(item => {
        this.FileList.push({
          name: item.img_name,
          url: require(`../../assets/Rotation_image/${item.img_name}`)
        })
      })
      ser.result.LifePhotos.forEach(item => {
        this.fileList.push({
          name: item.img_name,
          url: require(`../../assets/Life_photos_image/${item.img_name}`)
        })
      })
      // console.log(ser.result.HeadImage[0].img_name)
      // console.log(ser.result)
    },

    // 点击标签页项的处理函数
    handleClick () {
      // 再去请求接口获取数据
      console.log(this.activeName)
    },

    // 在上传背景图之前处理函数
    beforeAvatarUpload_a (file) {
      // 给要发送的对象添加数据
      this.datas.names = file.name
      this.datas.types = this.activeName
    },

    // 背景图片上传成功时调用
    handleAvatarSuccess_a (res, file) {
      // 判读是否添加头像成功
      if (file.response.status !== 200) return this.$message.error('添加背景失败!')
      // 渲染背景
      this.imageUrl_b = URL.createObjectURL(file.raw)
      this.$message.success('添加背景成功!')
    },

    // 在上传轮播图之前处理的函数
    beforeAvatarUpload_b (file) {
      // 给要发送的对象添加数据
      this.datas.names = file.name
      this.datas.types = this.activeName
    },

    // 点击放大背景图的处理函数
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 点击图片下载的处理函数
    handleDownload (file) {
      // 创建a标签
      const al = document.createElement('a')
      // 给a标签添加隐藏
      al.style.display = 'none'
      // a标签添加支持下载，必填
      al.download = true
      // a标签添加要下载的地址
      al.href = file.url
      // 添加a标签
      document.body.appendChild(al)
      // 点击a标签
      al.click()
      // 移除a标签
      document.body.removeChild(al)
    },

    // 点击删除的处理函数
    async handlePicture (file) {
      // 发起删除请求
      const { data: ser } = await this.$http.delete(`deletePicture/${file.name}/type/${this.activeName}`)
      // 判断是否删除成功
      if (ser.status !== 200) return this.$message.error('删除图片失败!')
      // 删除图片
      this.$refs.upload.handleRemove(file)
      this.$message.success('删除图片成功!')
    },

    // 轮播图成功上传时调用
    handleAvatarSuccess_b (res, file) {
      // 判读是否添加轮播图成功
      if (file.response.status !== 200) return this.$message.error('添加背景失败!')
      this.$message.success('添加背景成功!')
    },

    // 提示用户是否确定删除
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },

    // 在生活照之前调用
    onChange (file) {
      // 给要发送的对象添加数据
      this.datas.names = file.name
      this.datas.types = this.activeName
    },

    // 点击编辑所有描述
    async editing () {
      // 发起请求生活照数据
      const { data: ser } = await this.$http.get(`${this.activeName}/type/${this.activeName}`)
      // 判断是否添加成功
      if (ser.status !== 200) return this.$message.error('获取生活照失败!')
      // 把数据赋值给DescriptionForm
      this.nameForm = ser.result
      this.DescriptionVisible = true
      // 判断数据是否为空,为空就禁用选项
      if (ser.result.length === 0) {
        this.Forbidden = true
      }
    },

    // 点击提交要添加的生活照
    AddLifePhotos () {
      // 表单预验证
      this.$refs.ruleFormRef.validate(async (valid) => {
        // 判断是否验证成功
        if (!valid) return false
        // 判断datas是否有值
        if (this.datas.names.length === 0) return this.$message.error('请选择要添加的生活照!')
        const { data: ser } = await this.$http.post(`${this.activeName}`, this.datas)
        // 判断是否添加成功
        if (ser.status !== 200) return this.$message.error('添加生活照失败!')
        // 重置表单
        this.$refs.ruleFormRef.resetFields()
        this.$message.success('添加生活照成功!')
      })
    },

    // 选择发生变化调用函数
    async handleChange (id) {
      // 选择框一旦发生变化发起请求
      const { data: ser } = await this.$http.get(`${this.activeName}/${id}`)
      if (ser.status !== 200) return false
      // 给描述表单赋值
      this.DescriptionForm = ser.result[0]
    },

    // 编辑对话框的关闭事件
    closedCallback () {
      // 清空选择框
      this.MedianValue = ''
      // 清空表单
      this.$refs.DescriptionFormRef.resetFields()
    },

    // 点击确定修改的函数调用
    ConfirmModify () {
      console.log(this.MedianValue)
      // 表单预验证
      this.$refs.DescriptionFormRef.validate(async (valid) => {
        // 判断是否验证成功
        if (!valid) return false
        // 发起修改请求
        const { data: ser } = await this.$http.put(`${this.activeName}`, this.DescriptionForm)
        // 判断是否修改成功
        if (ser.status !== 200) return this.$message.error('修改描述失败!')
        // 提示用户修改成功
        this.$message.success('修改描述成功!')
        // 重新获取数据
        // 关闭对话框
        this.DescriptionVisible = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-uploader {
    background-color: #fbfdff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    height: 148px;
    width: 148px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.background_i {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 146px;
    text-align: center;
}

.avatar {
    width: 148px;
    height: 148px;
    display: block;
}

.rowCol_button {
  margin-left: 15px;
}

.lifePhotos_div {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.el-select {
  margin-left: 10px;
}
</style>
